<template>
  <div class="box">
    <div class="flexa">
      <div>
        <el-carousel style="height: 500px;">
          <el-carousel-item v-for="item in detail.subImages" :key="item" style="height: 500px;">
            <img :src="IMGBASEURL + item" alt="" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div>
        <div class="title">{{detail.name}}</div>
        <div class="info">{{detail.subTitle}}</div>
        <div class="price">
          <p>门店自营</p>
          <p>{{detail.price}}元</p>
        </div>
        <div class="stock">
          库存剩余{{detail.stock}}
        </div>
        <div class="priceInfo">
          <p>
            <span>{{detail.name}}</span>
            <span style="padding-left: 300px;">{{detail.price}}元</span>
          </p>
          <div style="color: #ff7800;font-size: 30px;">共计：{{detail.price}}元</div>
        </div>
        <div class="btna">
          <div class="adcart">加入购物车</div>
          <div>立即购买</div>
        </div>
      </div>
    </div>
    <div>
      <img src="/vue/imgs/detail/item-price.jpeg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "productDetail",
  data(){
    return {
      detail : {
        subImages : []
      }
    }
  },
  created() {
    this.getDetail()
  },
  methods : {
    getDetail(){
      if (!this.$route.query.id){
        this.$router.back()
        this.$message.info('无效的id')
      }
      this.axios
      .get("/api/product/" + this.$route.query.id)
      .then((res) => {
        if (res.status == 200){
          this.detail = res.data
          this.detail.subImages = res.data.subImages.split(',')
          this.detail.subImages.push(res.data.mainImage)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 1400px;
  margin: 0 auto;
  padding: 10px 0;
  .flexa{
    display: flex;
    &>div{
      flex: 1;
      padding: 40px;
    }
    .title{
      font-size: 25px;
      line-height: 50px;
      font-weight: 900;
    }
    .info{
      color: #707070;
      font-size: 18px;
    }
    .price{
      color: #ff7800;
      font-size: 18px;
      line-height: 30px;
      padding: 20px 0;
      border-bottom: 1px solid rgba(0,0,0,0.2);
    }
    .stock{
      padding: 50px;
      color: #ff7800;
      background: rgba(0,0,0,0.05);
      border: 1px solid rgba(0,0,0,0.1);
      font-size: 16px;
    }
    .priceInfo{
      padding: 50px;
      background: rgba(200,200,200,0.05);
      line-height: 30px;
      font-size: 16px;
      margin-top: 30px;
    }
    .btna{
      display: flex;
      width: 100%;
      &>div{
        width: 200px;
        text-align: center;
        line-height: 50px;
        height: 50px;
        border: 1px solid #ff7800;
        margin: 20px;
        color: #ff7800;
        cursor: pointer;
      }
      .adcart{
        color: #fff;
        background: #ff7800;
      }
    }
  }
}
</style>